<template>
    <div class="search">
        <div v-if="title" class="left">
            <slot name="left">
                <span>{{ title }}</span>
            </slot>
        </div>
        <div class="select-time">
            <div class="item start">
                <div class="name">住</div>
                <div class="date">{{ startDateStr }}</div>
            </div>
            <div class="item end">
                <div class="name">离</div>
                <div class="date">{{ endDateStr }}</div>
            </div>
        </div>
        <div class="content ellipsis-text-1" @click="handleSearchClick">
            <slot name="content">
                <span class="keyword">{{ keyword }}</span>
                <i class="icon-cancel" v-if="cancelIcon" @click.stop="handleCancelClick"></i>
            </slot>
        </div>
        <div class="right">
            <slot name="right">
                <i class="icon-search" v-if="searchIcon"></i>
            </slot>
        </div>
    </div>
</template>


<script setup>
import useMainStore from '@/stores/modules/main';
import { formatMonthDay } from '@/utils/format_date';
import { storeToRefs } from 'pinia';
import { computed, ref } from 'vue';

const searchValue = ref("")

const mainStore = useMainStore()
const { startDate, endDate } = storeToRefs(mainStore)
const startDateStr = computed(() => formatMonthDay(startDate.value, "MM.DD"))
const endDateStr = computed(() => formatMonthDay(endDate.value, "MM.DD"))

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    keyword: {
        type: String,
        default: '关键字/位置/民宿'
    },
    searchIcon: {
        type: Boolean,
        default: false
    },
    cancelIcon: {
        type: Boolean,
        default: false
    },
})

// 搜索框点击事件
const emit = defineEmits(["searchClick", "cancelClick"]);
const handleSearchClick = () => {
    emit("searchClick");
}

const handleCancelClick = () => {
    emit("cancelClick")
}

</script>


<style lang="less" scoped>
:global(.van-nav-bar .van-nav-bar__content .van-nav-bar__title) {
    width: 73%;
    max-width: 100%;
}

// :deep(.van-search__content .van-search__content--square) {
//     background-color: #f2f4f6;
// }
:deep(.van-search) {
    padding: 0;
}

:deep(.van-search__action) {
    color: #999;
}

.search {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
    color: #999;
    border-radius: 6px;
    background: #f2f4f6;
    height: 35px;
    // line-height: 45px;

    .left {
        font-weight: 500;
        // min-width: 30px;
        font-size: 14px;
        padding-right: 6px;
        margin-right: 5px;
        border-right: 1px solid #fff;
        color: #333;
        white-space: nowrap;
    }

    .select-time {
        display: flex;
        flex-direction: column;

        .item {
            display: flex;
            flex-direction: row;
            align-items: center;
            line-height: normal;
            font-size: 10px;

            .name {
                font-size: 10px;
            }

            .date {
                position: relative;
                color: #333;
                margin: 0 10px 0 3px;
                font-weight: 500;
            }
        }

        .end .date::after {
            content: " ";
            width: 0;
            height: 0;
            border: 4px solid #666;
            border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #666;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -webkit-transform: rotate(45dge);
            -ms-transform: rotate(45dge);
            transform: rotate(45dge);
            position: absolute;
            bottom: 0;
            right: -12px;
        }
    }

    .content {
        position: relative;
        flex: 1;
        padding: 0 6px;
        text-align: left;
        border-left: 1px solid #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .keyword {
            max-width: 155px;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        // .icon-cancel {
        //     position: absolute;
        //     top: 30%;
        //     right: 0;
        //     display: inline-block;
        //     background-image: url(../../assets/img/sprite.png);
        //     background-position: -92px --58.5px;
        //     width: 14.5px;
        //     height: 15px;
        //     background-size: 125px 110px;
        // }
    }

    .right {
        display: flex;
        align-items: center;
    }

    .icon-search {
        width: 24px;
        height: 24px;
        display: inline-block;
        background-image: url(../../assets/img/home/home-sprite.png);
        background-position: -29px -151px;
        background-size: 207px 192px;
    }
}
</style>